<div layout="column"  class="generalEditTab">
    <md-toolbar md-scroll-shrink="" class="md-accent editToolbarBackgroundColor" layout="row" layout-align="start center">
            <span ng-if="vm.add">新增系统用户</span>
            <span ng-if="vm.edit">系统用户详情</span>
            <span flex></span>
            <md-button ng-if="!vm.editable" class="md-raised" aria-label="返回" ng-click="vm.goBack()">
                返回
            </md-button>
            <md-button ng-if="!vm.editable&&isShow('1001003003')" class="md-raised" aria-label="编辑" ng-click="vm.edit()" >
                编辑
            </md-button>

    </md-toolbar>
    <div class="generalEditTabPadding">
        <form name="userForm">
                <div layout="column" >
                    <div class="generalTitleRow" layout="row" layout-align="start center">
                        <span>账号角色*</span>
                        <div  layout="row" layout-align="space-around center" class="userDetailRoleRow">
                            <div ng-repeat="item in vm.items">
                                <md-checkbox ng-disabled="!vm.editable" ng-checked="vm.exists(item.ROLE_KEY_ID, vm.selected)"  ng-click="vm.toggle(item, vm.selected)" ng-value="item.ROLE_KEY_ID">
                                    {{ item.ROLE_NAME }}
                                </md-checkbox>
                            </div>
                        </div>
                    </div>
                    <div layout="row" layout-align="start center" class="generalLongInputRow">
                        <div>
                            <md-input-container md-no-float class="md-block">
                                <label>用户名</label>
                                <input text-change ng-disabled="!vm.editable" required id="clientName" name="clientName" autocomplete="off" ng-model="vm.clientName" placeholder="请输入4位以上英文或数字的账号" ng-blur="vm.checkUserNameDuplicate()" ng-minlength="4" md-maxlength="20" ng-pattern="/^[a-zA-Z0-9]{4,20}$/">
                                <div ng-show="userForm.clientName.$touched" ng-messages="userForm.clientName.$dirty && userForm.clientName.$error">
                                    <div ng-message="required">这是必填项.</div>
                                    <div ng-message="pattern">请输入4至20位数字或字母的组合</div>
                                </div>
                            </md-input-container>
                        </div>
                    </div>
                    <div layout="row" layout-align="start center" class="generalLongInputRow">
                        <div>
                            <md-input-container md-no-float class="md-block">
                                <label>账号密码</label>
                                <input text-change ng-disabled="!vm.editable" autocomplete="off" ng-focus="vm.clearPassword()" type="password" id="password" name="password" required ng-model="vm.password" placeholder="请输入6位以上英文或数字组成的密码" ng-minlength="6"  md-maxlength="20" ng-pattern="/^[a-zA-Z0-9]{6,20}$/">
                                <div ng-show="userForm.password.$touched" ng-messages="userForm.password.$dirty && userForm.password.$error">
                                    <div ng-message="required">这是必填项.</div>
                                    <div ng-message="minlength">密码至少6位.</div>
                                    <div ng-message="md-maxlength">密码最多20位.</div>
                                    <div ng-message="pattern">密码不符合规则.</div>
                                </div>
                            </md-input-container>
                        </div>
                    </div>

                    <div layout="row" layout-align="start center" class="generalLongInputRow">
                        <div>
                            <md-input-container md-no-float class="md-block">
                                <label>账号邮箱</label>
                                    <input ng-disabled="!vm.editable" type="email" name="email" ng-model="vm.email" placeholder="请输入正确的邮箱" ng-pattern="/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/">
                                    <div ng-show="userForm.email.$touched" ng-messages="userForm.email.$dirty && userForm.email.$valid && userForm.email.$error" >
                                    <div ng-message-exp="pattern">邮箱不符合规则</div>
                                </div>
                            </md-input-container>
                        </div>
                    </div>

                    <div layout="row" layout-align="start center" class="generalNormalInputRow">
                        <div>
                            <md-input-container class="md-block">
                                <label>是否上线</label>
                                <md-select ng-disabled="!vm.editable" ng-model="vm.selectState">
                                    <md-option ng-value="1">是</md-option>
                                    <md-option ng-value="0">否</md-option>
                                </md-select>
                            </md-input-container>
                        </div>
                    </div>

                    <section ng-if="vm.editable && vm.canClearPassword && isShow('1001003004')" layout="row" layout-sm="column" layout-align="center center" layout-wrap>
                        <md-button class="md-raised md-warn" ng-click="vm.deleteUser()" >删除该用户</md-button>
                    </section>

                    <div layout="row" layout-align="start center" class="generalBtnRow">
                        <md-button ng-if="vm.editable" class="md-raised" aria-label="取消" ng-click="vm.cancel()">
                            取消
                        </md-button>
                        <md-button ng-if="vm.editable" class="md-raised md-primary" aria-label="保存" ng-click="vm.createNewUser(userForm)">
                            保存
                        </md-button>
                    </div>


                </div>
        </form>
    </div>
</div>